<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            let colors = document.querySelectorAll(".color");
            let mode = 0;
            Array.from(colors).forEach(value => {
                value.onchange = function (e) {
                    mode = e.target.value;
                }
            });

            let cb_select_all = document.querySelector("input[name='cb_select_all']");
            let cb_selects = document.querySelectorAll("input[name='cb_select']");
            cb_select_all.onchange = function (e) {
                if (mode == 1) {
                    console.log("全选或全不选")
                    cb_selects.forEach(value => value.checked = e.target.checked);
                } else {
                    console.log("反选")
                    cb_selects.forEach(value => {
                        value.checked = !value.checked;
                    })
                }
            }
        }
    </script>
</head>
<body>
<input type="radio" value="1" class="color" name="color"> 全选或全不选
<input type="radio" value="2" class="color" name="color"> 反选
<input type="checkbox" name="cb_select_all">
</br>
<input type="checkbox" name="cb_select">
<input type="checkbox" name="cb_select">
<input type="checkbox" name="cb_select">
<input type="checkbox" name="cb_select">
<input type="checkbox" name="cb_select">
<input type="checkbox" name="cb_select">
</body>
</html>